<template>
  <div class="detail-tab-bar">
    <div class="detail-tab-bar-item items">
      <!-- <img src="@/assets/icon/checkbox.png" alt="" /> -->
      <van-checkbox @click="mainChecked" v-model="checkeds">全选</van-checkbox>
      <!-- <span >全选</span> -->
    </div>
    <div class="detail-tab-bar-item" @click="buyClick">0</div>
    <div class="detail-tab-bar-item shop-car" @click="addClick">下单</div>
  </div>
</template>

<script>
export default {
  props: {
    checkeds: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  methods: {
    addClick() {
      this.$emit("addClick");
    },
    buyClick() {
      this.$emit("buyClick");
    },
    mainChecked() {
      console.log(12);
      this.$emit("mainChecked");
    },
  },
};
</script>
<style lang="scss" scoped>
.detail-tab-bar {
  position: fixed;
  left: 0;
  bottom: 49px;
  width: 100%;
  z-index: 1000;
  display: flex;
  height: 49px;
  background-color: #fff;

  .detail-tab-bar-item {
    // flex: 1;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 23px;
    }
  }
  div.items {
    width: 70%;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
    // &::before {
    //   position: relative;
    //   left: -10px;
    //   top: 0px;
    //   display: block;
    //   width: 20px;
    //   height: 20px;
    //   content: "";
    //   background: url(~@/assets/icon/checkbox.png) no-repeat 0 -152px;
    //   background-size: 20px;
    // }
  }
  .shop-car {
    background-color: #b4282d;
    color: #fff;
  }
}
</style>